<form (ngSubmit)="onSubmit()" [formGroup]="form">
<ng-container formArrayName="defaultArray">
<ng-container *ngFor="let item of defaultList.controls;let index = index" [formGroup]="item">
<p>{{index + 1}}</p>
<div class="form-group text-left">
<label for="name">姓名</label>
<input type="text" class="form-control" id="name" placeholder="姓名" name="name" formControlName="name">
</div>
<div class="form-group text-left">
<label for="job">職位</label>
<input type="text" class="form-control" id="job" placeholder="職位" name="job" formControlName="job">
</div>
</ng-container>
</ng-container>
<button mat-flat-button class="mb-3 align-items-center" color="primary" (click)="addDefault()">
<mat-icon [inline]="true">add</mat-icon>新增
</button>
<hr>
<button type="submit" class="btn btn-master" [disabled]="form.invalid">送出</button>
{{form.value | json}}
</form>
form = new FormGroup({
defaultArray: new FormArray([
new FormGroup({
name: new FormControl(''),
job: new FormControl(''),
})
])
});
get defaultList() {
return this.form.get('defaultArray') as FormArray;
}
addDefault() {
this.defaultList.push(new FormGroup({
name: new FormControl(''),
job: new FormControl(''),
}));
}